.color-picker {
	display: inline-block;
	position: relative;
	width: 31px;
	height: 31px;
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	font-size: 0;
	cursor: pointer;

	&.is-disabled {
		color: #c0c4cc;
		cursor: not-allowed;
		background-color: #ffffff;
	}

	.color-picker__color {
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 2px;
		border: 1px solid #909399;
		text-align: center;

		&.is-alpha {
			background: url();
		}
	}

	.color-picker__color-inner {
		position: absolute;
		left: 0;
		top: -4px;
		right: 0;
		bottom: 0;
		font-size: 12px;
		line-height: 28px;
	}
}

.color-dropdown__main-wrapper {
	display: flex;
	height: 180px;
	margin-bottom: 8px;
}

.color-dropdown__btns {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	text-align: right;
}

.color-dropdown__value {
	font-size: 12px;
	color: #000000;
}

.cancel-button {
	margin-right: 6px;
}

.color-picker--medium {
	width: 32px;
	height: 32px;
}

.color-picker--small {
	width: 28px;
	height: 28px;
}

.color-picker--mini {
	width: 19px;
	height: 19px;
	padding: 2px;

	.color-picker__color-inner {
		position: absolute;
		left: 0;
		top: -8px;
		right: 0;
		bottom: 0;
		font-size: 8px;
	}
}

//alphaSlider   样式
.color-alpha-slider {
	box-sizing: border-box;
	position: relative;
	width: 280px;
	height: 12px;
	background: url();

	.color-alpha-slider__bar {
		position: relative;
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
		height: 100%;
	}

	.color-alpha__thumb {
		position: absolute;
		cursor: pointer;
		box-sizing: border-box;
		left: 0;
		top: 0;
		width: 4px;
		height: 100%;
		border-radius: 1px;
		background: #fff;
		border: 1px solid #f0f0f0;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
		z-index: 1;
	}

	&.is-vertical {
		width: 20px;
		height: 180px;

		.color-alpha-slider__bar {
			background: linear-gradient(to bottom,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 1) 100%);
		}

		.color-alpha__thumb {
			left: 0;
			top: 0;
			width: 100%;
			height: 4px;
		}
	}
}

//hueSlider   样式
.color-hue-slider {
	box-sizing: border-box;
	position: relative;
	width: 280px;
	height: 12px;
	background-color: red;

	//float: right;
	&.is-vertical {
		width: 12px;
		height: 180px;
		padding: 2px 0;

		.color-hue-slider__bar {
			background: linear-gradient(to bottom,
					#f00 0%,
					#ff0 17%,
					#0f0 33%,
					#0ff 50%,
					#00f 67%,
					#f0f 83%,
					#f00 100%);
		}

		.color-hue-slider__thumb {
			left: 0;
			top: 0;
			width: 100%;
			height: 4px;
		}
	}

	.color-hue-slider__bar {
		position: relative;
		background: linear-gradient(to right,
				#f00 0%,
				#ff0 17%,
				#0f0 33%,
				#0ff 50%,
				#00f 67%,
				#f0f 83%,
				#f00 100%);
		height: 100%;
	}

	.color-hue-slider__thumb {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 4px;
		height: 100%;
		border-radius: 1px;
		background-color: #ffffff;
		border: 1px solid #f0f0f0;
		box-shadow: 0 0 2px #0009;
		cursor: pointer;
	}
}


//preDefine   样式
.color-predefine {
	display: flex;
	width: 280px;
	margin-top: 8px;
	font-size: 12px;

	.color-predefine__colors {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
	}

	.color-predefine__color-selector {
		width: 20px;
		height: 20px;
		margin: 0 0 8px 8px;
		border-radius: 4px;
		cursor: pointer;

		&:nth-child(10n + 1) {
			margin-left: 0;
		}

		>div {
			display: flex;
			height: 100%;
			border-radius: 3px;
		}

		&.selected {
			box-shadow: 0 0 3px 2px #40a9ff;
		}
	}
}


//svPanel   样式
.color-svpanel {
	position: relative;
	width: 280px;
	height: 180px;
	margin-right: 10px;

	.color-svpanel__white,
	.color-svpanel__black {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.color-svpanel__white {
		background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
	}

	.color-svpanel__black {
		background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
	}

	.color-svpanel__cursor {
		position: absolute;

		>div {
			width: 4px;
			height: 4px;
			box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
				0 0 1px 2px rgba(0, 0, 0, 0.4);
			border-radius: 50%;
			transform: translate(-2px, -2px);
		}
	}
}